<template>
	<view>
		<uni-search-bar placeholder="请搜索内容" @focus="toSearch"></uni-search-bar>
		<!-- 轮播图 -->
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in banners" :key="index">
				<view class="swiper-item">
					<image :src="item" mode="heightFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 列表 -->
		<view class="list">
			<list-item 
				:item="item" 
				v-for="(item, index) in list" 
				:key="index" 
				@click="toDetail(item.id, item.title)"
			>
				<template #word>{{ item.word }}</template>
			</list-item>
		</view>
	</view>
</template>

<script>
	import CarMixins from '../../mixins/car-mixins.js'
	export default {
		mixins: [CarMixins],
		data() {
			return {
				banners: [
					"../../static/images/banner1.webp",
					"../../static/images/banner2.webp",
					"../../static/images/banner3.webp",
					"../../static/images/banner4.webp",
				],
				list: [],
				pageCode: 1
			};
		},
		methods: {
			fetchList() {
				uni.request({
					url:'http://localhost:3000/list',
					data: {
						_page: this.pageCode
					},
					success: resp => {
						this.list = this.list.concat(resp.data)
					}
				})
			},
			toDetail(id, title) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id + '&title=' + title
				})
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			}
		},
		onLoad() {
			this.fetchList();
		},
		onReachBottom() {
			this.pageCode++
			this.fetchList()
		}
	}
</script>

<style lang="scss">
.swiper {
	width: 100%;
	height: 400rpx;
	image {
		width: 100%;
		height: 400rpx;
	}
}

</style>
